import React, { Component } from 'react'
import { Modal, Button, Input, Form, Select, Tree, message } from 'antd'
import { addAuth } from '../../api/role'

const treeData = [
  {
    title: '首页',
    key: '/home',
  },
  {
    title: '用户',
    key: '/home/user',
  },
  {
    title: '角色',
    key: '/home/role',
  },
  {
    title: '店铺',
    key: '/home/shop',
  },
  {
    title: '商品管理',
    key: '/home/product',
    children: [
      {
        title: '商品列表',
        key: '/home/product/list',
      },
      {
        title: '商品分类',
        key: '/home/product/category',
      },
    ],
  },
  {
    title: '数据统计',
    key: '/home/datav',
    children: [
      {
        title: '流水信息',
        key: '/home/datav/flowers',
      },
      {
        title: '销售统计',
        key: '/home/datav/sale',
      },
    ],
  },
]

export default class auth extends Component {
  state = {
    isModalVisible: false,
    menus: [],
  }
  showModal = () => {
    this.setState({
      isModalVisible: true,
    })
  }

  handleCancel = () => {
    this.setState({
      isModalVisible: false,
    })
  }
  handleOk = () => {
    let { account } = JSON.parse(localStorage.userInfo)
    console.log(account)

    // 构造数据，将数据提交给服务器
    const object = {
      id: this.props.value._id,
      authUser: account,
      authTime: new Date(),
      menus: this.state.menus,
    }
    console.log(object)

    addAuth(object).then((lcz) => {
      this.props.refresh()
      message.success(lcz.data.msg)
    })

    this.setState({
      isModalVisible: false,
    })
  }
  render() {
    let { isModalVisible } = this.state
    return (
      <>
        <Button onClick={this.showModal} type="dashed">
          授权
        </Button>
        <Modal
          title="添加授权"
          visible={isModalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          // footer={null}
        >
          <Tree
            checkable
            onCheck={this.onCheck}
            treeData={treeData}
            // defaultSelectedKeys={[]}
            defaultCheckedKeys={this.props.value.menus}
          />
        </Modal>
      </>
    )
  }
  onCheck = (values, info) => {
    console.log([...values, ...info.halfCheckedKeys])
    this.setState({
      menus: [...values, ...info.halfCheckedKeys],
    })
  }
  // onCheck = (checkedKey, info) => {
  //   //页面显示需要用到
  //   this.roleStore.setCheckedKey(checkedKey)
  //   //后台权限需要用到，没有全部勾选获取父节点
  //   let checkedKeys = [...checkedKey, ...info.halfCheckedKeys]
  //   this.roleStore.setCheckedKeys(checkedKeys)
  // }
}
